<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cloudscape demo pages</title>

    <script>
      const isDevelopment = '<%= process.env.NODE_ENV %>' !== 'production';

      const csp = { 'default-src': "'self'", 'font-src': 'data:', 'style-src': "'self'" };

      if (isDevelopment) {
        csp['connect-src'] = `'self' ws://${location.host};`;
      }

      // Theming generates inline styles in runtime
      if (location.hash.includes('theming')) {
        csp['style-src'] = "'unsafe-inline' 'self'";
      }
      if (location.hash.includes('code-editor')) {
        csp['worker-src'] = 'blob:'; // ace uses web workers for syntax validation
        csp['img-src'] = 'data:'; // this component contains icons loaded this way
      }
      // Custom CSP required for thumbnails in FileUpload component
      if (location.hash.includes('file-upload')) {
        csp['img-src'] = 'blob:';
      }
      
      const cspString = Object.entries(csp)
        .map(([key, value]) => `${key} ${value}`)
        .join('; ');

      document.write('<meta http-equiv="Content-Security-Policy" content="' + cspString + '" />');
    </script>
  </head>

  <body>
    <!-- #b element should be there for compatibility with global navigation -->
    <div id="b">
      <div id="app"></div>
    </div>
  </body>
</html>
